<!DOCTYPE html>
<html>
<head>
<title>HRD_CENTER</title>
<link rel='stylesheet' type='text/css' href="style/main.css">
<meta name="" content="">
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
	word="";
	className="";
	status="";
	id=0;
	stu_id="";
	$(document).ready(function(){	
		$("#word").keyup(function(){
			selectChange();
		});
		$("#cls,#sta").change(function(){
			selectChange();	
		});
	});
</script>
<script>	
		var xmlhttp;	
		if (window.XMLHttpRequest)
		{// code for IE7+, Firefox, Chrome, Opera, Safari
		  xmlhttp=new XMLHttpRequest();
		}
		else
		{// code for IE6, IE5
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		// Event ReadyStateChange
		xmlhttp.onreadystatechange=function()
	    {
	    	if (xmlhttp.readyState==4 && xmlhttp.status==200)
	    	{
	    		//alert(xmlhttp.responseText);
	    		$(".list").html(getData(xmlhttp.responseText));
	    	}
		}	
		function sendValue(name,className,status,id,stu_id){
			xmlhttp.open("POST","server/server.jsp",true);
			xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			xmlhttp.send("id="+id+"&name="+name+"&class="+className+"&status="+status+"&stu_id="+stu_id);
		}
		sendValue("","","",0,"");
		function getData(data){
			var table="<tr><th>ID</th><th>Name</th><th>Gender</th><th>University</th><th>Class</th><th>Status</th></tr>";            	          
			var obj = JSON.parse(data);
			for(var i=0;i<obj.length;i++){
				var gender = (obj[i].stu_gender==1)?"Male":"Female";
				var status= (obj[i].stu_status==1)?"img/check.png":"img/uncheck.png";
				table+="<tr><td>"+obj[i].stu_id+"</td>"+
							"<td>"+obj[i].stu_name+"</td>"+
							"<td>"+gender+"</td>"+
							"<td>"+obj[i].stu_university+"</td>"+
							"<td>"+obj[i].stu_class+"</td>"+
							"<td><img src='"+status+"' style='width:50px; height:50px' onclick=changesStatus("+obj[i].stu_status+",'"+obj[i].stu_id+"')></td>"+
					   "</tr>";
			}
			return table;
		}
		function changesStatus(id,stu_id){
			sendValue(name, className, status, id,stu_id);	
		}	
		function selectChange(){
			status=$("#sta").val();
			className=$("#cls").val();
			word=$("#word").val();
			sendValue(word,className,status,id,stu_id);	
		}
</script>
</head>
<body>
<div id="wrapper">
<div><h1>Korea Software HRD Center</h1></div>
<div><img alt="HRD Center" src="img/hrd.jpg" style="float:left;margin-bottom:50px;margin-left:40px;margin-top:-26px;width:103px;"></div>
<div class="box">
	<input type='text' name="txtSearch" placeholder="Search By Name"  id="word">
    <select id="sta">
    	<option>All Status</option>
        <option value="1">Enable</option>
        <option value="0">Dropped</option>
    </select>
    <select id="cls">
    	<option>All Class</option>
        <option >BTB</option>
        <option >SR</option>
        <option >KPS</option>
        <option >PP</option>
    </select>
</div>
	<table class="list">
		 
	</table><!--end of list-->
</div>
</body>
</html>